<template>
  <div>
    <h1>生命周期</h1>
    <button @click="num++">{{num}}</button>
    <button @click="setNum(num+5)">加5</button>
    <p v-for="item in list" :key="item">{{item}}</p>
    <input type="text" v-model="temp" @keyup.enter="addList()">
  </div>
</template>
<script>
  // ref 导入一个创建响应式 值类型数据的方法
  // reactive 响应式 引用类型方法
   import {ref,reactive} from 'vue'
  export default {
    setup(){
      // 创造一个响应式对象 num 默认值是5
      const num = ref(5);
     
      // 定义更新num的方法
      function setNum(n){
        // 在setup 中num的值访问与赋值要加value 在template不需要
        num.value = n;
      }
       // 返回num
      // 定义一个响应式列表数据
      var list = reactive(["Vue","react","Angular","小程序"])
      // 定义temp 临时数据
      var temp = ref("");
      // 定义添加list 的方法
      function addList(){
        // 注意值类型访问要加value
        list.push(temp.value);
        temp.value = "";
      }
      // 返回 定义的方法与数据
      return {num,setNum,list,temp,addList};
    },
    beforeUnmount(){
      console.log("组件将要卸载")
    },
    unmounted(){
      console.log("组件已经卸载")
    }
  }
</script>